<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>rgb(255,0,0)</li>
        <li>rgb(0,255,0)</li>
        <li>rgb(0,0,255)</li>
    </ul>
    <script>
        // map : 字典
        // 一、创建map
        //1.new   这也太灵活了
        let map = new Map();
        var obj = {age:20}
        var arr = [1,2,3]
        map.set('name','张三').set(arr,"hello");
        console.log(map);

        // 2.构造
        // let map = new Map([['name','张三'],['age',20]])
        // console.log(map);

        // 二.map里的方法
        // (1)size 长度
        // console.log(map.size);
        //对象没有长度

        //(2)set 添加
        map.set('map','map')
        // console.log(map);

        //(3)删除
        //delete 删除对应键名
        // map.delete('name')
        // console.log(map);
        //clear 清除(删全部)
        // map.clear()
        // console.log(map);

        //(4)是否有
        // 注意键名是字符串
        // console.log(map.has('name'));//查键名

        //(5) 通过键名获取键值
        let res = map.get(arr)//可以用变量名获得,不能用字面量获得
        console.log('res:'+res);

        // (6) keys和values
        // console.log(map.keys(),map.values());//输出的是迭代对象
    
        // 用map可以把元素作为键名
        // 比如lis,这里的元素li会由于重名,在对象中被覆盖掉
        // 用map就可以做到一一对应
        // var lis = document.querySelectorAll('li')
        // lis.forEach(item=>map.set(item,item.innerHTML))
        // console.log(map);
        // map.forEach((item,index)=>{
        //     //这里index是键名,item是键值
        //     index.style.color = item
        // })
        //但是这个也有点尴尬,这个可以用的情况不多
    </script>
</body>
</html>